<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}系统管理后台{% endblock %}</title>

    <!-- Bootstrap 5 -->
    <link href="/static/bootstrap5/css/bootstrap.min.css" rel="stylesheet">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="/static/fontawesome/css/all.min.css">

    <!-- 公共样式 -->
    <link rel="stylesheet" href="/static/css/admin.css">
    {% block head %}{% endblock %}
</head>
<body>
<style>
    /* 用户资料区域样式 */
    .user-profile {
        position: relative; /* 相对定位，用于下拉菜单定位 */
        display: flex;
        align-items: center;
        gap: 0.75rem;
        cursor: pointer; /* 显示手型光标，提示可点击 */
        padding: 0.25rem;
        border-radius: 0.5rem;
        transition: background-color 0.2s ease;
    }

    .user-profile:hover {
        background-color: rgba(0, 0, 0, 0.03);
    }

    .user-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: #165DFF;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
    }

    /* 下拉菜单样式 */
    .user-dropdown {
        position: absolute;
        top: 100%; /* 位于用户资料区域下方 */
        right: 0;
        min-width: 180px;
        background-color: white;
        border-radius: 0.5rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        padding: 0.5rem 0;
        margin-top: 0.5rem;
        z-index: 1000; /* 确保在其他元素上方 */
        display: none; /* 默认隐藏 */
    }

    /* 下拉菜单项样式 */
    .dropdown-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        color: #4E5969;
        transition: all 0.2s ease;
    }

    .dropdown-item:hover {
        background-color: #F2F3F5;
        color: #165DFF;
    }

    .dropdown-item.danger {
        color: #F53F3F;
    }

    .dropdown-item.danger:hover {
        background-color: rgba(245, 63, 63, 0.05);
        color: #F53F3F;
    }

    /* 分隔线样式 */
    .dropdown-divider {
        height: 1px;
        background-color: #F2F3F5;
        margin: 0.5rem 0;
    }

    /* 显示下拉菜单 */
    .user-profile.show-dropdown .user-dropdown {
        display: block;
        animation: fadeIn 0.2s ease;
    }

    /* 淡入动画 */
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-5px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
</style>

<div class="app-container">
    <!-- 侧边栏 -->
    <aside class="sidebar">
        <div class="sidebar-header">
            <a href="/admin/dashboard" class="sidebar-logo">
                <i class="fas fa-cogs"></i>
                <span>系统管理后台</span>
            </a>
        </div>
        <nav class="sidebar-menu">
            <a href="/admin/dashboard" class="menu-item {% if active_page == 'dashboard' %}active{% endif %}">
                <i class="fas fa-tachometer-alt"></i> 仪表盘
            </a>
            <a href="/admin/users" class="menu-item {% if active_page == 'users' %}active{% endif %}">
                <i class="fas fa-users"></i> 用户管理
            </a>
            <a href="/admin/orders" class="menu-item {% if active_page == 'orders' %}active{% endif %}">
                <i class="fas fa-shopping-cart"></i> 订单管理
            </a>
            <a href="/admin/kami" class="menu-item {% if active_page == 'kami' %}active{% endif %}">
                <i class="fas fa-key"></i> 卡密管理
            </a>
            <a href="/admin/licenses" class="menu-item {% if active_page == 'licenses' %}active{% endif %}">
                <i class="fas fa-file-signature"></i> 授权管理
            </a>
            <a href="/admin/apicalls" class="menu-item {% if active_page == 'api-calls' %}active{% endif %}">
                <i class="fas fa-chart-line"></i> API调用统计
            </a>
            <a href="/admin/apilogs" class="menu-item {% if active_page == 'api-logs' %}active{% endif %}">
                <i class="fas fa-history"></i> API调用日志
            </a>
            <a href="/admin/system_config" class="menu-item {% if active_page == 'settings' %}active{% endif %}">
                <i class="fas fa-cog"></i> 系统设置
            </a>
        </nav>
    </aside>

    <!-- 主内容 -->
    <main class="main-content">
        <!-- 顶部导航栏 -->
        <div class="top-nav">
            <div class="nav-left">
                <button class="sidebar-toggle" id="sidebarToggle">
                    <i class="fas fa-bars"></i>
                </button>
                <div class="breadcrumb" style="margin-bottom: 0">
                    <span>{% block breadcrumb %}{% endblock %}</span>
                </div>
            </div>
            <div class="nav-right">
                <div class="notification-icon">
                    <i class="fas fa-bell"></i>
                    <span class="notification-badge">3</span>
                </div>
                <div class="user-profile" id="userProfile">
                    <div class="user-avatar">{{ admin_user.username[0]|upper }}</div>
                    <div class="user-info d-none d-md-block">
                        <div class="user-name">{{ admin_user.username }}</div>
                        <div class="user-role" style="font-size: 0.75rem; color: #86909C;">{{ user_role }}</div>
                    </div>

                    <!-- 下拉菜单移到.user-profile内部 -->
                    <div class="user-dropdown" id="userDropdown">
                        <div class="dropdown-item">
                            <i class="fas fa-user"></i>
                            <span>个人资料</span>
                        </div>
                        <div class="dropdown-item">
                            <i class="fas fa-cog"></i>
                            <span>账号设置</span>
                        </div>
                        <div class="dropdown-divider"></div>
                        <div class="dropdown-item danger">
                            <i class="fas fa-sign-out-alt"></i>
                            <span>退出登录</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        {% block content %}{% endblock %}
    </main>
</div>

<!-- Bootstrap -->
<script src="/static/bootstrap5/js/bootstrap.bundle.js"></script>
<script src="/static/js/api_define.js"></script>

<script>
    document.addEventListener("DOMContentLoaded", () => {
        // 1. 导航菜单激活状态处理
        const path = window.location.pathname;
        document.querySelectorAll(".sidebar-menu .menu-item").forEach(el => {
            if (el.getAttribute("href") === path) {
                el.classList.add("active");
            }
        });

        // 2. 侧边栏切换功能
        const sidebar = document.querySelector(".sidebar");
        const sidebarToggle = document.getElementById("sidebarToggle");

        if (sidebarToggle) {
            sidebarToggle.addEventListener("click", () => {
                sidebar?.classList.toggle("show");
            });
        }

        // 点击侧边栏外部隐藏（仅小屏幕）
        document.addEventListener("click", (e) => {
            if (window.innerWidth <= 992) {
                if (sidebar && !sidebar.contains(e.target) && sidebarToggle && !sidebarToggle.contains(e.target)) {
                    sidebar.classList.remove("show");
                }
            }
        });

        // 窗口缩放时自动调整侧边栏
        window.addEventListener("resize", () => {
            if (sidebar && window.innerWidth > 992) {
                sidebar.classList.remove("show");
            }
        });

        // 3. 用户下拉菜单功能（合并到一个DOMContentLoaded事件中）
        const userProfile = document.getElementById('userProfile');
        if (userProfile) {
            // 绑定点击事件
            userProfile.addEventListener('click', function (e) {
                e.stopPropagation();
                this.classList.toggle('show-dropdown');
            });

            // 点击其他区域关闭下拉菜单
            document.addEventListener('click', function () {
                if (userProfile.classList.contains('show-dropdown')) {
                    userProfile.classList.remove('show-dropdown');
                }
            });

            // 下拉菜单项点击事件
            document.querySelectorAll('.dropdown-item').forEach(item => {
                item.addEventListener('click', function (e) {
                    e.stopPropagation();
                    const action = this.querySelector('span').textContent;

                    // 这里可以添加实际的操作逻辑
                    if (action === '退出登录') {
                        if (confirm('确定要退出登录吗？')) {
                            window.location.href = "/admin/logout";
                            // 退出登录逻辑
                        }
                    } else if (action === '个人资料') {
                        // 打开个人资料逻辑
                    } else if (action === '账号设置') {
                        // 打开账号设置逻辑
                    }

                    userProfile.classList.remove('show-dropdown');
                });
            });
        } else {
            console.warn('未找到userProfile元素');
        }
    });
</script>
{% block scripts %}{% endblock %}
</body>
</html>
